<template>
  <div class="bg-grey pb-60 ">
    <!--面包屑开始-->
    <div class="archive-header pt-20 wow fadeInUp animated">
      <div class="container">
          <h2 class="font-weight-900">风景</h2>
          <div class="breadcrumb">
              <a href="index.html" rel="nofollow">相册</a>
              <span rel="nofollow"></span> 风景
          </div>
          <div class="bt-1 border-color-1 mt-30 mb-50"></div>
      </div>
    </div>
    <!--面包屑结束-->

    <!-- 相册内容开始 -->
    <div class="container wow fadeInUp animated ">
    <el-card shadow="hover" class="hover-up transition-normal is-always-shadow">
      <div class="row">
      <div class="col-md-2 pt-10 " v-for="(item,index) in srcList" :key="index">
        <el-image class="border-radius-5 hover-up transition-normal" :src="item" :preview-src-list="srcList" lazy>
             <div slot="error" class="border-radius-5">
              <el-image style="border: 1px solid grey;" class="border-radius-5"
                src="http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/1693357599635.jpg"
               ></el-image>
             </div>
        </el-image>
      </div>
      </div>

    </el-card>

    </div>
    </div>  
  
</template>

<script>
export default {
  data() {
    return {
        url: 'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/1693326923666.jpg',
        srcList: [
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/MVIMG_20220813_191957.jpg',
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/get_thumbnail.jpg',
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/2334354546565432.jpg',
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/20220726_01371249.png.jpg',
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230830082159.jpg',
        ]
    }
  },
}
</script>

<style>

</style>